import React from 'react'
import { useHistory } from 'react-router-dom'
import { Form, Input, Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { typeAddress } from '@/types/cart'
import { setShipping } from '@/stores/cart'
import CheckoutSteps from '@/components/CheckoutSteps'
import './index.scss'

const Shipping = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const { address } = useSelector((state:any) => state.cart)

  console.log(address)

  /**
   * 点击完成设置收货地址
   */
  const onclickFinish = (e: typeAddress) => {
    dispatch(setShipping(e))
    history.push('/payment')
  }

  return (
    <div className="shipping">
      <div className="steps">
        <CheckoutSteps current={1}/>
      </div>
      <h1>我的收货地址</h1>
      <Form
        autoComplete="off"
        initialValues={address}
        labelAlign="left"
        labelCol={{ span: 6 }}
        onFinish={onclickFinish}
      >
        <Form.Item
          label="省份"
          name="province"
          rules={[{ required: true, message: '请输入省份' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="城市"
          name="city"
          rules={[{ required: true, message: '请输入城市' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="详细地址"
          name="address"
          rules={[{ required: true, message: '请输入详细地址' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="邮编"
          name="postalCode"
          rules={[{ required: true, message: '请输入邮编' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button
            className="submit-btn"
            htmlType="submit"
            type="primary"
          >
            确认地址, 继续下一步
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Shipping
